<template>
  <!-- 整体页面，打算做背景 -->
  <div class="pageStyle">
    <!-- 文档的边框 -->
    <div class="pageBorder" :style="`width:${pageBorder[2]}mm;height:${pageBorder[3]}mm;`">
      <!-- 文档的容器 -->
      <div style="position: absolute;">
        <!-- 文档 ，设置默认位置和大小-->
        <div
          class="page"
          :style="`width:${pageBorder[2]}mm;height:${pageBorder[3]}mm;border:1px solid black;margin:16px 0`"
          v-for="(contentXmlBean,index) of contentXmlBeanList"
          :key="index"
        >
          <!-- 实际页面 -->
          <div
            :style="`width:${convertPagePosition(contentXmlBean,2)}mm;height:${convertPagePosition(contentXmlBean,3)}mm;`"
          >
            <span v-for=" (layer,index) of contentXmlBean.layerList" :key="index">
              <!-- 文字 -->
              <font
                v-for=" (text,index) of layer.textObjectBeanList"
                :key="index"
                :style="convertFontStyle(text)"
              >{{text.text}}</font>
              <!-- 图片 -->
              <img
                v-for=" (image,index) of layer.imageObjectBeanList"
                :key="index"
                :src="`data:image/jpeg;base64,${image.imageBase64}`"
                :style="convertImageStyle(image)"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOfdJson } from "@/api/ofdapi.js";
export default {
  data() {
    return {
      pageBorder: [],
      contentXmlBeanList: []
    };
  },
  methods: {
    convertImageStyle(image) {
      let postion = "position: absolute;";
      let boundary = image.boundary.split(" ");
      window.console.log(boundary);
      let postionNumber =
        "left:" + boundary[0] + "mm;top:" + boundary[1] + "mm;";

      window.console.log(parseFloat(boundary[3]));
      let height =
        "height:" + (parseFloat(boundary[3]) - parseFloat(boundary[0])) + "mm;";
      let width =
        "width:" + (parseFloat(boundary[2]) - parseFloat(boundary[1])) + "mm;";
      let style = postion + postionNumber + height + width;
      return style;
    },
    convertFontStyle(text) {
      let fontSize = "font-size:" + text.fontSize + "mm;";
      let color = "color:rgb(" + text.fillColor + ");";
      let fontFamily = "font-family:" + text.fontName + ";";
      let postion = "position: absolute;";
      let boundary = text.boundary.split(" ");
      let postionNumber =
        "left:" + boundary[0] + "mm;top:" + boundary[1] + "mm;";
      let style = fontSize + postion + postionNumber + fontFamily + color;
      return style;
    },
    convertPagePosition(contentXmlBean, number) {
      let postionList = contentXmlBean.physicalBoxList[0].value.split(" ");
      return postionList[number];
    },
    getOfdJson() {
      getOfdJson().then(res => {
        window.console.log(res);
        if (res.status == 200) {
          // 指定文档默认大小和位置
          this.pageBorder = res.data.docRoots.physicalBoxList[0].split(" ");
          // 加载页面中实际指定的大小和位置
          this.contentXmlBeanList = res.data.docRoots.contentXmlBeanList;
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getOfdJson();
    });
  }
};
</script>
<style scoped>
.page {
  position: relative;
  /* background: red; */
}
.pageStyle {
  /* background-color: black; */
  width: 100%;
  height: 100%;
  text-align: center;
}
.pageBorder {
  border: 1px solid #ffffff00;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
</style>